<template>
	<div class="user">
		<div class="top">
			<div class="set">
				<img src="~imgs/user_7.gif"/>
			</div>
			<div class="face">
				<img src="~imgs/user_1.gif"/>
			</div>
			<div class="phone">
				<p>18811843454</p>
			</div>
			<div class="filter"></div>
		</div>
		<div class="user_main">
			<ul>
				<li>
					<img src="~imgs/user_3.gif"/>
					<span>购买记录</span>
				</li>
				<li>
					<img src="~imgs/user_4.gif"/>
					<span>我的收藏</span>
				</li>
				<li>
					<img src="~imgs/user_3.gif"/>
					<span>我的订单</span>
				</li>
				<li>
					<img src="~imgs/user_5.gif"/>
					<span>管路收货地址</span>
				</li>
				<li>
					<img src="~imgs/user_6.gif"/>
					<span>修改个人资料</span>
				</li>
			</ul>
		</div>
		<tabbar></tabbar>
	</div>
</template>

<script>
	import Main from '@/pages/main/Main'
	export default {
	  components:{
	  	"tabbar":Main
	  }
	}
</script>

<style lang="stylus" scoped>
	.user
		width: 100%;
		.top
			width: 100%;
			height: 3.2rem;
			background: url("~imgs/user_2.gif")no-repeat;
			background-size: 7.5rem 3.2rem;
			position: relative;
			.set
				overflow: hidden;
				img
					
					width: 0.4rem;
					height: 0.4rem;
					margin: 0.1rem 0 0 0.2rem;
			.face
				width: 100%;
				display: flex;
				justify-content: center;
				margin: 0.3rem 0;
				img
					width: 1.5rem;
					height: 1.5rem;
			.phone
				width: 100%;
				text-align: center;
				p
					font-size: 0.24rem;
					color: #fff;
			.filter
				width: 100%;
				height: 100%;
				background: #242424;
				opacity: 0.1;
				position: absolute;
				top: 0;
				left: 0.1;
		.user_main
			width: 100%;
			margin-top: 0.5rem;
			ul
				width: 100%;
				li
					width: 100%;
					background: #e8eff7;
					margin-bottom: 0.2rem;
					padding: 0.2rem 0;
					display: flex;
					align-items: center;
					img
						width: 0.42rem;
						height: 0.48rem;
						margin: 0 0.2rem;
					span
						font-size: 0.3rem;
						color: #515151;
</style>